﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>chapter3</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="chapter3.css" rel="stylesheet" />
    <script src="chapter3.js"></script>
</head>
<body>
    <div class="chapter3 fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to chapter3</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div id="sections">
                <div id="sizing" class="section">
                    <h2>Sizing</h2>
                    <div id="width">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>

                <div id="margin" class="section">
                    <h2>Margin</h2>
                    <div id="parent">
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>

                <div id="padding" class="section">
                    <h2>Padding</h2>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis felis posuere neque ornare feugiat. Phasellus eget pretium mi. Cras tempor suscipit lectus, non aliquet purus facilisis in. Curabitur accumsan, mi non rhoncus pulvinar, diam massa lobortis erat, sit amet adipiscing orci elit et sem. Praesent tincidunt imperdiet lacus in pellentesque. Suspendisse aliquet ipsum id lorem imperdiet ac lobortis turpis ullamcorper. Proin lacinia dapibus orci ac semper. Praesent semper tortor sit amet felis venenatis sed facilisis felis pulvinar. Nulla a metus in neque euismod luctus viverra eget massa. Nulla ultrices, nulla ultrices dapibus venenatis, lectus sapien fermentum nisl, quis facilisis dolor nisi ac diam. Sed rutrum orci id mi condimentum quis vestibulum odio consectetur. Quisque facilisis auctor purus, blandit sollicitudin felis rutrum quis.</p>
                    </div>
                </div>

                <div id="border" class="section">
                    <h2>Border</h2>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis felis posuere neque ornare feugiat. Phasellus eget pretium mi. Cras tempor suscipit lectus, non aliquet purus facilisis in. Curabitur accumsan, mi non rhoncus pulvinar, diam massa lobortis erat, sit amet adipiscing orci elit et sem. Praesent tincidunt imperdiet lacus in pellentesque. Suspendisse aliquet ipsum id lorem imperdiet ac lobortis turpis ullamcorper. Proin lacinia dapibus orci ac semper. Praesent semper tortor sit amet felis venenatis sed facilisis felis pulvinar. Nulla a metus in neque euismod luctus viverra eget massa. Nulla ultrices, nulla ultrices dapibus venenatis, lectus sapien fermentum nisl, quis facilisis dolor nisi ac diam. Sed rutrum orci id mi condimentum quis vestibulum odio consectetur. Quisque facilisis auctor purus, blandit sollicitudin felis rutrum quis.</p>
                    </div>
                </div>

                <div id="background" class="section">
                    <h2>Background</h2>
                    <div>
                        <!--<button onclick="WinJS.Navigation.navigate('/pages/box/box.html')">box</button>-->

                    </div>
                </div>

                <div id="overflow" class="section">
                    <h2>Overflow</h2>
                    <div id="container">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis felis posuere neque ornare feugiat. Phasellus eget pretium mi. Cras tempor suscipit lectus, non aliquet purus facilisis in. Curabitur accumsan, mi non rhoncus pulvinar, diam massa lobortis erat, sit amet adipiscing orci elit et sem. Praesent tincidunt imperdiet lacus in pellentesque. Suspendisse aliquet ipsum id lorem imperdiet ac lobortis turpis ullamcorper. Proin lacinia dapibus orci ac semper. Praesent semper tortor sit amet felis venenatis sed facilisis felis pulvinar. Nulla a metus in neque euismod luctus viverra eget massa. Nulla ultrices, nulla ultrices dapibus venenatis, lectus sapien fermentum nisl, quis facilisis dolor nisi ac diam. Sed rutrum orci id mi condimentum quis vestibulum odio consectetur. Quisque facilisis auctor purus, blandit sollicitudin felis rutrum quis.</p>

                    </div>
                </div>

                <div id="shadow" class="section">
                    <h2>Shadow</h2>
                    <div id="shadow1"></div>
                </div>
            </div>
        </section>
    </div>
</body>
</html>
